<template>
  <a-spin :spinning="loading">
    <div class="page-miH page-bgBack" style="position: relative">
      <PageHeader @back="$router.go(-1)" subTitle="返回">新增商保订单</PageHeader>
      <div class="pageBox">
        <div class="stepsBox">
          <div class="steps-head">
            <a-steps :current="current">
              <a-step v-for="item in steps" :key="item.title" :title="item.title" />
            </a-steps>
          </div>
          <div :class="steps[current].content === 'Last' ? 'steps-contentLast' : 'steps-content'">
            <!------------------------ 第一步 ------------------------->
            <div style="padding: 8px 166px 32px 166px" v-if="steps[current].content === 'First'">
              <div class="contentTitle">选择保险公司</div>
              <a-select
                allowClear
                placeholder="请选择"
                v-model="planItem.insCompanyId"
                style="width: 300px; margin-top: 12px"
                @change="insuranceChange"
              >
                <a-select-option v-for="(item, index) in insuranceList" :key="index" :value="item.insCompanyId">
                  {{ item.companyName }}
                </a-select-option>
              </a-select>
              <div class="contentTitle">选择保险方案</div>
              <div style="display: flex; align-items: center">
                <a-select
                  allowClear
                  placeholder="请选择"
                  @change="selectPlan"
                  v-model="selectPlanItem"
                  style="width: 300px; margin-top: 12px"
                >
                  <a-select-option v-for="(item, index) in selectPlanList" :key="index" :value="item.id">{{
                    item.schemeName
                  }}</a-select-option>
                </a-select>
                <div
                  v-if="schemeConfirmFile"
                  style="margin-top: 12px; font-size: 14px; font-weight: 400; color: #636572; margin-left: 12px"
                >
                  点击下载<span class="downLoadFile" @click="downLoadFile">方案确认函</span>
                </div>
              </div>
              <!-- <div v-if="realityMonthAmount" style="font-size: 14px; font-weight: 400; color: #999999; margin-top: 12px">
                保险月费：{{ realityMonthAmount }}
              </div> -->
              <div
                v-if="realityMonthAmount && realityMonthAmount.length"
                style="
                  padding: 16px 12px 16px 24px;
                  width: 838px;
                  min-height: 66px;
                  background: #ffffff;
                  box-shadow: 0px 4px 12px 0px rgba(106, 102, 246, 0.1);
                  border-radius: 4px;
                  margin-top: 16px;
                "
              >
                <div style="font-size: 14px; font-weight: 400; color: #999999; margin-top: 12px">方案明细：</div>
                <div style="display: flex; justify-content: flex-start; width: 100%; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in realityMonthAmount"
                    :key="index"
                    style="
                      width: 254px;
                      height: 41px;
                      background: #f6f6f6;
                      border-radius: 4px;
                      margin: 12px 12px 0 0;
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      padding: 0 16px;
                    "
                  >
                    <a-tooltip>
                      <template slot="title">
                        {{ item.typeName }}
                      </template>
                      <div
                        style="
                          font-size: 14px;
                          font-weight: 500;
                          color: #55565d;
                          width: 98px;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                          overflow: hidden;
                        "
                      >
                        {{ item.typeName }}
                      </div>
                    </a-tooltip>
                    <div style="display: flex">
                      <div class="label">保险月费：</div>
                      <a-tooltip>
                        <template slot="title">
                          <div>{{ item.monthAmount }}</div>
                        </template>
                        <div
                          style="
                            font-size: 14px;
                            font-weight: 500;
                            color: #55565d;
                            width: 40px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                          "
                          class="value"
                        >
                          {{ item.monthAmount }}
                        </div>
                      </a-tooltip>
                    </div>
                  </div>
                </div>
              </div>
              <div class="contentTitle">选择保险周期</div>
              <div style="font-size: 14px; font-weight: 400; color: #999999; margin-top: 12px">保险周期涉及到的月份均收取整月保费</div>
              <a-range-picker valueFormat="YYYY-MM-DD" v-model="rangeDate" @change="onDateChange" style="width: 300px; margin-top: 12px" />
            </div>
            <!------------------------ 第二步 ------------------------->
            <div style="padding: 35px; display: flex" v-if="steps[current].content === 'Second'">
              <div class="bgImg">
                <div>
                  <img style="width: 260px; height: 140px" src="@/assets/img/shangbaoBG.png" alt />
                </div>
                <div style="font-size: 24px; font-weight: bold; color: #3c3d43; margin-top: 20px">上传投保人员</div>
                <div style="font-size: 14px; font-weight: 400; color: #666666; margin-top: 20px">
                  下载《投保人员明细表模板》填写缴纳该保险方案的人
                </div>
                <div style="font-size: 14px; font-weight: 400; color: #666666">员信息并上传，还可以根据需要上传其他附件。</div>
              </div>
              <div style="width: 50%; padding-left: 70px; padding-top: 22px">
                <div style="display: flex">
                  <img src="@/assets/img/icon.png" alt style="width: 24px; height: 24px" />
                  <div class="nextTitle">下载《投保人员明细表模板》填写缴纳该保险方案的人员信息</div>
                </div>
                <a-button @click="downLoadDetailFile" style="margin-left: 30px; margin-top: 12px">
                  <a-icon type="download" />投保人员明细表模板
                </a-button>
                <div style="display: flex; margin-top: 24px">
                  <img src="@/assets/img/icon.png" alt style="width: 24px; height: 24px" />
                  <div class="nextTitle">上传《投保人员明细表》</div>
                </div>
                <a-upload
                  ref="upload"
                  :file-list="fileList"
                  :headers="headers"
                  action="/file/api/v1/general/upload/attachment"
                  @change="handleChange"
                  name="files"
                  accept=".xls, .xlsx, .xlsm"
                  :showUploadList="{
                    showDownloadIcon: true
                  }"
                  @download="download"
                  style="margin-left: 30px; margin-top: 12px"
                >
                  <a-button type="primary" style="margin-top: 12px">{{ !fileList.length ? "上传文件" : "重新上传" }}</a-button>
                </a-upload>
                <div style="display: flex; align-items: center; margin-top: 24px">
                  <img src="@/assets/img/icon.png" alt style="width: 24px; height: 24px" />
                  <div class="nextTitle">上传其他附件</div>
                  <a-alert message="首次投保必须上传被保险人营业执照" banner style="width: 300px; margin-left: 16px" />
                </div>
                <a-upload
                  ref="upload"
                  :file-list="fileListMultiple"
                  :headers="headers"
                  action="/file/api/v1/general/upload/attachment"
                  @change="handleChangeMultiple"
                  name="files"
                  :showUploadList="{
                    showDownloadIcon: true
                  }"
                  @download="download"
                >
                  <a-button type="primary" style="margin-left: 30px; margin-top: 12px">添加文件</a-button>
                </a-upload>
              </div>
            </div>
            <!------------------------ 第三步 ------------------------->
            <div v-if="steps[current].content === 'Last'">
              <a-alert message="请仔细核对下方列表中的数据，无误后点击“确认提交”按钮。" banner closable />

              <div class="combined">
                <div style="display: flex; align-items: center; height: 20px">
                  <div class="combinedTitle">保险周期：</div>
                  <div style="font-size: 18px; font-weight: 500; color: #3c3d43">{{ startDate + "~" + endDate }}</div>
                </div>
                <div style="display: flex; align-items: center; flex-wrap: wrap">
                  <div
                    v-for="(item, index) in realityMonthAmount"
                    :key="index"
                    style="
                      width: 254px;
                      height: 41px;
                      background: #f6f6f6;
                      border-radius: 4px;
                      margin: 12px 12px 0 0;
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      padding: 0 16px;
                    "
                  >
                    <a-tooltip>
                      <template slot="title">
                        {{ item.typeName }}
                      </template>
                      <div
                        style="
                          font-size: 14px;
                          font-weight: 500;
                          color: #55565d;
                          width: 98px;
                          text-overflow: ellipsis;
                          white-space: nowrap;
                          overflow: hidden;
                        "
                      >
                        {{ item.typeName }}
                      </div>
                    </a-tooltip>
                    <div style="display: flex">
                      <div class="label">保险月费：</div>
                      <a-tooltip>
                        <template slot="title">
                          <div>{{ item.monthAmount }}</div>
                        </template>
                        <div
                          style="
                            font-size: 14px;
                            font-weight: 500;
                            color: #55565d;
                            width: 40px;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            overflow: hidden;
                          "
                          class="value"
                        >
                          {{ item.monthAmount }}
                        </div>
                      </a-tooltip>
                    </div>
                  </div>
                </div>
                <!-- <div style="width: 25%; height: 56px; border-right: 1px solid #e8e8e8">
                  <div style="font-size: 18px; font-weight: 600; color: #222426">方案合计</div>
                  <div style="font-size: 14px; font-weight: 400; color: #636572; margin-top: 4px">
                    保险周期：{{ startDate + "~" + endDate }}
                  </div>
                </div>
                <div style="width: 75%; height: 56px; display: flex; padding: 0 108px 0 42px; justify-content: space-between">
                  <div>
                    <div class="combinedTitle">保险月费</div>
                    <div style="margin-top: 4px; font-size: 16px; font-weight: 500; color: #333333">{{ realityMonthAmount }}</div>
                  </div>
                  <div>
                    <div class="combinedTitle">投保人数</div>
                    <a-input-number
                      style="margin-top: 4px"
                      :min="1"
                      :precision="0"
                      :formatter="limitNumber"
                      :parser="limitNumber"
                      v-model="participation"
                      @change="participationChange"
                      placeholder="请输入"
                    />
                  </div>
                  <div>
                    <div class="combinedTitle">预估费用总计</div>
                    <div style="margin-top: 4px; font-size: 16px; font-weight: 500; color: #333333">{{ estimate }}</div>
                  </div>
                </div> -->
              </div>
              <iframe
                style="width: 100%; height: 1300px; margin-top: 24px"
                :src="'https://view.officeapps.live.com/op/view.aspx?src=' + `${detailTemplateFile}`"
              ></iframe>
            </div>
          </div>
        </div>
      </div>
      <a-modal @cancel="$router.go(-1)" :visible="successVisible" :footer="null" title="新增商保订单">
        <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center">
          <img class="w200" src="@/assets/img/1.png" alt />
          <div style="font-size: 16px; font-weight: 500; color: #3c3d43">申请投保成功</div>
          <a-button type="primary" style="margin-top: 30px" @click="$router.go(-1)">确定</a-button>
        </div>
      </a-modal>
      <div class="steps-action">
        <a-button v-if="current > 0" @click="prev">上一步</a-button>
        <a-button v-if="current == steps.length - 1" style="margin-left: 8px" type="primary" @click="onSubmit">确认提交</a-button>
        <a-button v-if="current < steps.length - 1" style="margin-left: 8px" type="primary" @click="next">下一步</a-button>
      </div>
    </div>
  </a-spin>
</template>
<script>
import moment from "moment";
import { getToken } from "xqjr-module-auth";
import { publicDownLoad } from "../downLoad";
import { selectCustomerConfig, selectCustomerCompanyConfig, selectCompanyBySiteId, addorder, selectCompanyById } from "./api";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      current: 0,
      fileList: [],
      estimate: 0,
      fileListMultiple: [],
      fileListMultipleCopy: [],
      participation: undefined,
      successVisible: false,
      steps: [
        {
          title: "选择方案",
          content: "First"
        },
        {
          title: "上传投保人员",
          content: "Second"
        },
        {
          title: "核对数据确认提交",
          content: "Last"
        }
      ],
      insuranceList: [],
      planItem: {},
      startDate: null,
      endDate: null,
      loading: false,
      schemeConfirmFile: null,
      schemeConfirmFileName: null,
      selectPlanList: [],
      realityMonthAmount: null,
      selectPlanItem: undefined,
      detailTemplateFileName: "",
      rangeDate: [],
      detailTemplateFile: "",
      companyDetail: {},
      headers: {}
    };
  },
  computed: {},
  watch: {},
  created() {
    this.headers = {
      token: getToken()
    };
    this.selectCustomerCompanyConfig();
  },
  mounted() {},
  methods: {
    limitNumber(value) {
      if (typeof value === "string") {
        return !isNaN(Number(value)) ? value.replace(/\./g, "") : 0;
      } else if (typeof value === "number") {
        return !isNaN(value) ? String(value).replace(/\./g, "") : 0;
      } else {
        return 0;
      }
    },
    download(file) {
      if (file.url) {
        publicDownLoad(file.url);
      } else if (file.response.data && file.response.data[0]) {
        publicDownLoad(file.response.data[0]);
      } else {
        this.$message.warning("文件下载失败");
      }
    },
    downLoadDetailFile() {
      if (this.companyDetail && this.companyDetail.detailTemplateFile) {
        publicDownLoad(this.companyDetail.detailTemplateFile);
      } else {
        this.$message.warning("请联系京普商务人员配置");
      }
    },
    // 提交
    onSubmit() {
      // if (!this.participation) {
      //   this.$message.warning("投保人数不能为0");
      // } else {
      var arr = {};
      this.insuranceList.forEach((item) => {
        if (item.insCompanyId === this.planItem.insCompanyId) {
          arr = item;
        }
      });
      var schemeName = "";
      var schemeId = "";
      this.selectPlanList.forEach((item) => {
        if (item.id === this.selectPlanItem) {
          schemeName = item.schemeName;
          schemeId = item.schemeId;
        }
      });
      this.loading = true;
      addorder({
        schemeName: schemeName,
        configId: this.selectPlanItem, // 保险方案id
        customerAttachment: this.fileListMultipleCopy, // 附件json字符串
        insEffectTime: this.startDate,
        insFailureTime: this.endDate,
        personTypeList: this.realityMonthAmount,
        // insuredNumber: this.participation,
        // monthAmount: this.realityMonthAmount,
        state: 0,
        // totalFee: this.estimate,
        schemeId: schemeId,
        insCompanyId: arr.insCompanyId,
        latestSubmitTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        companyName: arr.companyName,
        detailFile: this.detailTemplateFile
      })
        .then((res) => {
          this.successVisible = true;
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
      // }
    },
    // participationChange() {
    //   if (this.endDate && this.startDate) {
    //     var endDate = moment(moment(this.endDate, "YYYY-MM-DD")).format("YYYY-MM");
    //     var startDate = moment(moment(this.startDate, "YYYY-MM-DD")).format("YYYY-MM");
    //     var monthDiff = moment(endDate).diff(moment(startDate), "month") + 1;
    //   }
    //   if (this.realityMonthAmount && this.participation && monthDiff) {
    //     // 合计=月费*人数*一共几个月
    //     this.estimate = this.realityMonthAmount * this.participation * monthDiff;
    //   } else {
    //     this.estimate = 0;
    //   }
    // },
    downLoadFile() {
      publicDownLoad(this.schemeConfirmFile);
    },
    // 查询保险公司列表
    selectCustomerCompanyConfig() {
      selectCustomerCompanyConfig().then((res) => {
        this.insuranceList = res.data;
      });
    },
    handleChangeMultiple(info) {
      if ([...info.fileList] && [...info.fileList].length > 10) {
        this.$message.warning("最多上传十个附件");
      } else {
        let fileList = [...info.fileList];
        fileList = fileList.map((file) => {
          if (file.response) {
            file.url = file.response.url;
          }
          return file;
        });
        this.fileListMultiple = fileList;
        var arr = [];
        if (this.fileListMultiple && this.fileListMultiple.length) {
          this.fileListMultiple.forEach((item, index) => {
            if (item.status === "done" && item.response.data && item.response.data[0]) {
              arr.push({ name: item.name, url: item.response.data[0] });
            }
          });
        }
        if (arr && arr.length) {
          this.fileListMultipleCopy = JSON.stringify(arr);
        } else {
          this.fileListMultipleCopy = undefined;
        }
      }
    },
    handleChange(info) {
      let fileList = [...info.fileList];
      fileList = fileList.slice(-1);
      fileList = fileList.map((file) => {
        if (file.response) {
          file.url = file.response.url;
        }
        return file;
      });
      this.fileList = fileList;
      if (this.fileList && this.fileList.length) {
        if (this.fileList[0].status === "done" && this.fileList[0].response.data && this.fileList[0].response.data[0]) {
          this.detailTemplateFile = this.fileList[0].response.data[0];
          this.detailTemplateFileName = this.fileList[0].name;
        }
      } else {
        this.detailTemplateFile = "";
        this.detailTemplateFileName = "";
      }
    },
    // 选择保险公司变化
    insuranceChange(e) {
      this.selectPlanItem = undefined;
      this.realityMonthAmount = null;
      this.schemeConfirmFile = null;
      if (e) {
        selectCustomerConfig({ insCompanyId: e }).then((res) => {
          this.selectPlanList = res.data;
        });
      } else {
        this.selectPlanList = [];
      }

      selectCompanyById(e)
        .then((res) => {
          this.companyDetail = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 新增编辑投保方案-选择参保方案变化
    selectPlan(e) {
      if (e) {
        this.selectPlanList.forEach((item) => {
          if (item.id === e) {
            this.realityMonthAmount = item.personTypeList;
            this.schemeConfirmFile = item.schemeConfirmFile;
            this.schemeConfirmFileName = item.remark;
          }
        });
      } else {
        this.realityMonthAmount = null;
        this.schemeConfirmFile = null;
        this.schemeConfirmFileName = null;
      }
    },
    // 选择时间
    onDateChange(e) {
      this.startDate = e[0];
      this.endDate = e[1];
      if (this.endDate && this.startDate) {
        var endDate = moment(moment(this.endDate, "YYYY-MM-DD")).format("YYYY-MM");
        var startDate = moment(moment(this.startDate, "YYYY-MM-DD")).format("YYYY-MM");
        var monthDiff = moment(endDate).diff(moment(startDate), "month") + 1;
      }
      // if (this.realityMonthAmount && this.participation && monthDiff) {
      //   // 合计=月费*人数*一共几个月
      //   this.estimate = this.realityMonthAmount * this.participation * monthDiff;
      // } else {
      //   this.estimate = 0;
      // }
    },
    // 下一步
    next() {
      if (this.current === 0) {
        if (!this.planItem.insCompanyId) {
          this.$message.warning("请选择保险公司");
        } else if (!this.selectPlanItem) {
          this.$message.warning("请选择保险方案");
        } else if (!this.startDate || !this.endDate) {
          this.$message.warning("请选择保险周期");
        } else {
          this.current++;
        }
      } else if (this.current === 1) {
        if (!this.fileList.length) {
          this.$message.warning("未上传投保人员明细表");
        } else {
          this.current++;
        }
      }
    },
    // 上一步
    prev() {
      this.current--;
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep.ant-upload-list {
  width: 100% !important;
}
.label {
  height: 14px;
  font-size: 14px;
  font-weight: 400;
  color: #a6a8b4;
}
.value {
  font-size: 14px;
  font-weight: 400;
  color: #636572;
}
.pageBox {
  padding: 24px 24px 0 24px;
}
.stepsBox {
  .steps-head {
    width: 100%;
    padding: 40px 120px;
    height: 122px;
    background: #ffffff;
    box-shadow: 0px 4px 12px 0px var(--primary10);
    border-radius: 4px;
  }
  .steps-contentLast {
    margin-top: 16px;
    .combined {
      width: 100%;
      min-height: 102px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e8e8e8;
      margin-top: 24px;
      padding: 20px 36px;
      .combinedTitle {
        font-size: 14px;
        font-weight: 400;
        color: #a6a8b4;
      }
    }
  }
  .steps-content {
    margin-top: 16px;
    margin-bottom: 80px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    min-height: 200px;
    padding-bottom: 80px;
    .bgImg {
      width: 50%;
      border-right: 1px solid #e8e8e8;
      padding: 30px 35px 0 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .nextTitle {
      font-size: 16px;
      font-weight: 500;
      color: #3c3d43;
      margin-left: 8px;
    }
    .contentTitle {
      font-size: 16px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      border-left: 3px solid var(--primary);
      padding-left: 8px;
      margin-top: 24px;
      height: 20px;
      line-height: 20px;
    }
  }
}
.steps-action {
  width: 100%;
  height: 60px;
  box-shadow: inset 0px 1px 0px 0px #e8e8e8;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 48px;
  background: #ffffff;
}
.downLoadFile {
  font-size: 14px;
  font-weight: 400;
  color: var(--primary);
  cursor: pointer;
}
</style>
